<template>

<div class="speed-box clear-both" :style="'bottom:'+bottom+'rem'" :class="{'speed-open':speedOpen}">
    <div class="box-div">
        <div class="left-div float-left" @click="clickSpeed">
            <span class="iconfont iconfont-shuangxianyoujiantou float-left" :class="{'iconfont-shuangxianzuojiantou':speedOpen}" ></span>
            <span class="text text-center">快速导航</span>
        </div>
        <div class="right-div float-left">
            <nav-tab>
                <tab-item :class="{'active-icon':activeIcon==1}" @click.native="selectItem(1)">
                    <span>首页</span>
                    <template slot="icon" slot-scope="props">
                            <span class="iconfont iconfont-shouye" ></span>
                    </template>
                </tab-item>
                <tab-item :class="{'active-icon':activeIcon==2}" @click.native="selectItem(2)">
                    <span>分类</span>
                    <template slot="icon" slot-scope="props">
                        <span class="iconfont iconfont-fenlei1" ></span>
                    </template>  
                </tab-item>

                <tab-item  :class="{'active-icon':activeIcon==3}" @click.native="selectItem(3)">
                    <span>购物车</span>
                    <template slot="icon" slot-scope="props">
                        <span class="iconfont iconfont-gouwuche1"></span>
                    </template>  
                </tab-item>    
                <tab-item  :class="{'active-icon':activeIcon==4}" @click.native="selectItem(4)">
                    <span>我的</span>
                    <template slot="icon" slot-scope="props">
                        <span class="iconfont iconfont-wode"></span>
                    </template> 
                </tab-item>      
            </nav-tab>
        </div>
    </div>

        <div class="modal-box" v-show="speedOpen" @click="clearBox"></div>
</div>
</template>

<script>
//@bottom 单位为rem
import navTab from './../../MainIndex/tpl/nav-tab'
import tabItem from './../../MainIndex/tpl/tab-item'

export default {
    name:'navMenu',
    props:{
        bottom:{
            default:'1.8'        
        }
    },
    data(){
        return {
            speedOpen:false,
            activeIcon:0,
        }
    },
    methods:{
        clickSpeed(){
            this.speedOpen=!this.speedOpen
        },
        clearBox(){
            this.speedOpen=false
        },
        selectItem(val){
            let vm =this;
            this.activeIcon=val
            setTimeout(()=>{
                vm.activeIcon=0
                vm.speedOpen=false
                if(val==1){
                    vm.$router.push({name:'HomePage'})
                }else if(val==2){
                    vm.$router.push({name:'MenuPage'})    
                }else if(val==3){
                    vm.$router.push({name:'CartPage'})    
                }else{
                    vm.$router.push({name:'UserPage'})
                }

            },200);
        }
    },
    components:{
        navTab,
        tabItem
    }
}
</script>


<style scoped lang="scss">

.speed-box{
    position:fixed;
    right:0;
    z-index:1000;
    .box-div{   
        height:1.866667rem;
        display:flex;
        align-items:center;
        .left-div{
            height:1.066667rem;
            width:1.466667rem;
            background:rgba(0,0,0,.7);
            display:flex;
            align-items:center;
            border-bottom-left-radius:.133333rem;
            border-top-left-radius:.133333rem;
            z-index:1200;
            span{
                display:inline-block;
                color:#fff;
            }
            .text{
                width:.933333rem;
                font-size:.346667rem;
            }
        }
        .right-div{
            height:1.333333rem;
            width:0;
            opacity:0;
            transition: width .2s ease-in-out ,opacity .2s ease-in-out;
            display:flex;
            padding:.133333rem 0;
            border:.013333rem solid #fff;
            border-radius:.133333rem;
            background:#fff;
            z-index:1200;
            speed-item{
                flex:1;
            }
        }
    }

}
.speed-open{
    z-index:1000;
    .box-div{ 
        .right-div{
            height:1.333333rem;
            width:5.6rem;
            opacity:1;
            transition: width .2s ease-in-out ,opacity .2s ease-in-out;
        }
    }
}
.modal-box{
    position:fixed;
    top:0;
    left:0;
    bottom:0;
    right:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,.4);
    z-index:1000;
}
.active-icon{
    span{
    color:#e4393c;
    }
    .iconfont{
        color:#e4393c;
        font-size:.66rem;
    }
}


</style>
